<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>remote &lt;video&gt; with local &lt;source&gt;</title>

        <script>

            var video = null;
            var console = null;
            var testEnded = false;

            function endTest()
            {
                consoleWrite("<br>END OF TEST");
                testEnded = true;
                if (window.testRunner)
                    testRunner.notifyDone();
            }
            function hanged()
            {
                consoleWrite("FAIL: timed out");
                if (window.testRunner)
                    testRunner.notifyDone();
            }

            function logConsole()
            {
                if (!console && document.body) {
                    console = document.createElement('div');
                    document.body.appendChild(console);
                }
                return console;
            }

            function consoleWrite(text)
            {
                if (testEnded)
                    return;
                logConsole().innerHTML += text + "<br>";
            }

            function logEvent(evt)
            {
                consoleWrite("EVENT(" + evt.type + ")");
            }

            function logResult(msg, success)
            {
                if (success)
                    consoleWrite("<span style='color:green'>SUCCESS: " + msg + "</span>");
                else
                    consoleWrite("<span style='color:red'>FAIL: " + msg + "</span>");
            }

            function error(evt)
            {
                logEvent(evt)
                consoleWrite("");
                logResult("failed trying to load " + video.currentSrc, false);
                endTest();
            }

            var localMovie = "file:///tmp/web_tests/media/content/test.ogv";
            var remoteUrl = "http://localhost:8000/resources/test.ogv";

            function loadedmetadata(evt)
            {
                var src = video.currentSrc;

                logEvent(evt);
                if (src == localMovie)
                    logResult("local movie loaded", false);
                else if (src == remoteUrl)
                    logResult("remote movie loaded, local movie failed to load", true);
                else
                    logResult("video failed to load any movie", false);

                endTest();
            }

            if (window.testRunner)
            {
                localMovie = testRunner.pathToLocalResource(localMovie);
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }
            setTimeout(hanged, 10000);

            function test()
            {
                video = document.getElementById("vid");

                video.addEventListener("error", error);
                video.addEventListener('loadedmetadata', loadedmetadata);

                // Create two <source> children, the first with a local url and the second
                // with a remote url. The element should load the second.
                var src1 = document.createElement("source");
                src1.setAttribute("src", localMovie);

                var src2 = document.createElement("source");
                src2.setAttribute("src", remoteUrl);

                video.appendChild(src1);
                video.appendChild(src2);
            }
        </script>

    </head>

    <body onLoad="test()">

        <video id='vid' controls></video>

        <p>Test that a remote video element will not use a local &lt;source&gt;, and will
        use another remote &lt;source&gt;</p>

        <p>This test only behaves correctly in DRT</p>

    </body>
</html>
